<template>
    房型名称:
    <input type="text" v-model="name" placeholder="请输入房型名称" style="width:200px">
    房间最大:
    <input type="text" v-model="zuida"  style="width:100px">-
    <input type="text" v-model="zuixiao" style="width:100px">
    <input type="button" value="查询" @click="Shows">
    
   <table border="1">
    <thead>
    <tr>
        <td>房型名称</td>
        <td>房型图片</td>
        <td>门市价</td>
        <td>押金</td>
        <td>面积</td>
        <td>可住人数</td>
        <td>是否加床</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
        <tr v-for="i in infos">
        <td>{{ i.R_Name }}</td>
        <td> <img :src="i.R_img" style="width:60px;height:60px;"></td>
        <td>{{i.R_Maney }}</td>
        <td>{{i.R_YaJin?"需要":"不需要" }}</td>
        <td>{{i.R_MianJi }}</td>
        <td>{{i.R_Num }}</td>
        <td>{{i.R_AddChuang?"加床":"不加床" }}</td>
         
    </tr>
    </tbody>
  <a href="#" @click="page('F')">首页</a>
  <a href="#" @click="page('S')">上一页</a>
  <a href="#" @click="page('N')">下一页</a>
  <a href="#" @click="page('W')">尾页</a>
 <span>
    当前{{ fenye.index }}页
  共{{ fenye.Total }}页
  共{{ fenye.Count }}页
 
 </span>
   </table>
 
</template>

<script setup lang="ts">
import {onMounted,ref} from 'vue'
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios'
import {useCounterStore} from '../../stores/counter.ts'

const userstore=useCounterStore();

const user=useRouter();
const use=useRoute();
const name=ref("")
const zuida=ref(0)
const zuixiao=ref(0)
onMounted(()=>{
    Shows();
})
//显示字段
const infos=ref([
  {
    "R_ID": 1,
      "R_Name": "",
      "R_img": "1",
      "R_Maney": 100,
      "R_YaJin": true,
      "R_MianJi": 30,
      "R_Num": 1,
      "R_AddChuang": true
  }
])
const fenye=ref({
    index:1,
    size:2,
    Count:2,
    Total:1
})

const Shows=()=>{
    axios.get("https://localhost:7234/api/RoomInfo/GetInfo",{
        params:{
            index:fenye.value.index,
            size:fenye.value.size,
            big:zuida.value,
            min:zuixiao.value,
            name:name.value
        }
    })
    .then(res=>{
        console.log(res);
        
        infos.value=res.data.Data_info
        fenye.value.Count=res.data.Count
        fenye.value.Total=res.data.Total
    })
}

const page=(a:any)=>{
    switch(a){
        case 'F':
            fenye.value.index=1;
            break;
            case 'S':
            if(fenye.value.index>1){
                fenye.value.index--;
            }else{
                alert("已经是第一页了");
            }
            break;
            case 'N':
          if(fenye.value.index<fenye.value.Count){
            fenye.value.index++;
          }else{
            alert("最后一页")
          }
            break;
            case 'W':
            fenye.value.index=fenye.value.Count;
            break;
    }
    Shows()
}
</script>

<style scoped>

</style>